<template> 

  <div class="add-container" >
    <div class="form-container">
      <h2 style="text-align: center">FIXTURE NOTE</h2>
      <el-form :model="formParam" :rules="rules" ref="custForm">
        <div class="clearfix">
          <el-row class="header-title" justify="end">
            <el-col>
              <el-form-item label="Date" label-width="180px" style="float: right">
                <el-date-picker v-model="formParam.fixtureDate" value-format="YYYY-MM-DD" type="date"
                  placeholder="Select Date" style="width: 250px" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="header-title" justify="end">
            <el-col>
              <el-form-item label="No." label-width="180px" style="float: right">
                <span style="display: inline-block; width: 250px">{{ formParam.fixtureNo }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>1</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="CHARTERER" label-width="180px" prop="clientName" required>
              {{ formParam.clientName }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>2</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="OWNER" label-width="180px" prop="carrierName" required>
              <span>{{ formParam.carrierName }}</span>
              <!-- <el-select v-model="formParam.carrierName" filterable placeholder="choose">
                <el-option :key="item.carrierName" :label="item.carrierName" :value="item.carrierName"
                  v-for="item in carriers">
                </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>3</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23" class="flex-content">
            <el-form-item label="VESSEL" label-width="180px" prop="vesselName" required>
              MV
              <el-select v-model="formParam.vesselName" style="display: inline-block" filterable clearable
                placeholder="choose Vessel" @change="selectVessel">
                <el-option :key="item.vesselName" :label="item.vesselName" :value="item.vesselName"
                  v-for="item in vessels" />
              </el-select>

              <el-select v-model="formParam.voyageNo" style="display: inline-block" filterable clearable
                placeholder="choose Voyage" @change="selectPortCode">
                <el-option :key="item.voyageNo" :label="item.voyageNo" :value="item.voyageNo"
                  v-for="item in voyages" />
              </el-select>
              OR SUB OWNER’S GUARANTEE CARRYING VESSEL IS SUBJECT TO THE INTERNATIONAL SAFETY MANAGEMENT CODE (ISM) AND
              INTERNATIONAL SHIPPING AND PORT SECURITY SAFETY CODE (ISPS)
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>4</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23" style="display: flex">
            <el-form-item label="CARGO & READINESS" label-width="180px">
              <!-- ABOUT <span style="width: 120px;"><el-input type="number" v-model="formParam.units"></el-input></span>
              UNITS
              <el-select v-model="formParam.cargoType" filterable clearable allow-create>
                <el-option v-for="item in cargo_type" :key="item.label" :label="item.label" :value="item.label" />
              </el-select> 
              AROUND&nbsp;<el-input-number v-model="formParam.totalCbm" :precision="2" /> CBM, CARGO TO BE
              READY BY <el-date-picker value-format="YYYY-MM-DD" v-model="formParam.readinessDate" type="date"
                placeholder="Pick dates" style="width: 120px;margin:0 4px;" /> -->
              <el-input v-model="formParam.readiness" type="textarea" rows="3" style="width: 1000px" />
              <span>
                <PreViewImageUpload :record="recordData" :photos="Array.isArray(formParam.cargoList) ? formParam.cargoList : formParam.cargoList ? [formParam.cargoList] : []
                  " :accept="accept" :isAllAccept="false" :url="uploadUrl" :id="recordData.fixtureId"
                  :isTable="isTable" @onSuccess="submitUploadForm" />
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>5</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="DIMENSION SURVEY" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 5" type="textarea" rows="3" v-model="formParam.clause5" style="width: 1000px"
                  @blur="editNote(5)"></el-input>
                <div v-else>{{ formParam.clause5 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 5" @click="editTrue(5)" />
                    <Edit v-else @click="editNote(5)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>6</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="LOADING PORT" label-width="180px" prop="pol" required>
              <el-select v-model="formParam.pol" filterable allow-create clearable placeholder="choose port">
                <el-option :key="item.fullPortName" :label="item.fullPortName" :value="item.fullPortName"
                  v-for="item in pols" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>7</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="12">
            <el-form-item label="LAYCAN" label-width="180px" prop="laycan" required>
              <el-date-picker type="daterange" start-placeholder="Start date" end-placeholder="End date"
                format="YYYY-MM-DD" v-model="formParam.laycan" class="ipt" @change="datePickChange" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>8</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="DISCHARGING PORT" label-width="180px" prop="pod" required>
              <el-select v-model="formParam.pod" filterable allow-create clearable placeholder="choose port">
                <el-option :key="item.fullPortName" :label="item.fullPortName" :value="item.fullPortName"
                  v-for="item in pods" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>9</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="TRANSSHIPMENT" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 9" type="textarea" rows="3" v-model="formParam.clause9" style="width: 1000px"
                  @blur="editNote(9)"></el-input>
                <div v-else>{{ formParam.clause9 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 9" @click="editTrue(9)" />
                    <Edit v-else @click="editNote(9)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>10</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="FREIGHT RATE" label-width="180px" required>
              <div class="">
                <span>$
                  <el-form-item prop="freightRate" required style="display: inline-block">
                    <el-input style="width: 180px" type="number" v-model="formParam.freightRate"
                      @blur="freightRateBlur" />
                  </el-form-item>
                  PER CBM,
                  <el-form-item prop="shippingTerms" required style="display: inline-block">
                    <el-select v-model="formParam.shippingTerms" clearable filterable style="width: 100px">
                      <el-option v-for="(item, index) in shippingTermsList" :key="index" :label="item" :value="item" />
                    </el-select>
                  </el-form-item>
                  , NET</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>11</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="FREIGHT PAYMENT" label-width="180px" prop="" required>
              <div class="note-content">
                <el-input v-if="editId == 11" type="textarea" rows="3" v-model="formParam.clause11"
                  style="width: 1000px" @blur="editNote(11)"></el-input>
                <div v-else>{{ formParam.clause11 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 11" @click="editTrue(11)" />
                    <Edit v-else @click="editNote(11)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>12</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="TAXES / DUES" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 12" type="textarea" rows="3" v-model="formParam.clause12"
                  style="width: 1000px" @blur="editNote(12)"></el-input>
                <div v-else>{{ formParam.clause12 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 12" @click="editTrue(12)" />
                    <Edit v-else @click="editNote(12)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="1">
            <el-checkbox v-model="duesechecked">
              <template #default>
                <span>13</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="DEMURRAGE" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 13" type="textarea" rows="3" v-model="formParam.clause13"
                  style="width: 1000px" @blur="editNote(13)"></el-input>
                <div v-else>{{ formParam.clause13 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 13" @click="editTrue(13)" />
                    <Edit v-else @click="editNote(13)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>14</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="DEADFREIGHT" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 14" type="textarea" rows="3" v-model="formParam.clause14"
                  style="width: 1000px" @blur="editNote(14)"></el-input>
                <div v-else>{{ formParam.clause14 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 14" @click="editTrue(14)" />
                    <Edit v-else @click="editNote(14)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>15</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="AGENCY " label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 15" type="textarea" rows="3" v-model="formParam.clause15"
                  style="width: 1000px" @blur="editNote(15)"></el-input>
                <div v-else>{{ formParam.clause15 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 15" @click="editTrue(15)" />
                    <Edit v-else @click="editNote(15)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>16</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="BILL OF LADING" label-width="180px" prop="" required>
              <div class="note-content">
                <el-input v-if="editId == 16" type="textarea" rows="3" v-model="formParam.clause16"
                  style="width: 1000px" @blur="editNote(16)"></el-input>
                <div v-else>{{ formParam.clause16 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 16" @click="editTrue(16)" />
                    <Edit v-else @click="editNote(16)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>17</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="LOADING MATERIAL" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 17" type="textarea" rows="3" v-model="formParam.clause17"
                  style="width: 1000px" @blur="editNote(17)"></el-input>
                <div v-else>{{ formParam.clause17 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 17" @click="editTrue(17)" />
                    <Edit v-else @click="editNote(17)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>18</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="ARBITRATION" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 18" type="textarea" rows="3" v-model="formParam.clause18"
                  style="width: 1000px" @blur="editNote(18)"></el-input>
                <div v-else>{{ formParam.clause18 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 18" @click="editTrue(18)" />
                    <Edit v-else @click="editNote(18)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>19</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="CONFIDENTIALITY" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 19" type="textarea" rows="3" v-model="formParam.clause19"
                  style="width: 1000px" @blur="editNote(19)"></el-input>
                <div v-else>{{ formParam.clause19 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 19" @click="editTrue(19)" />
                    <Edit v-else @click="editNote(19)" />
                  </el-icon>
                </span>

              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox disabled checked>
              <template #default>
                <span>20</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="AGREEMENT PERIOD" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 20" type="textarea" rows="3" v-model="formParam.clause20"
                  style="width: 1000px" @blur="editNote(20)"></el-input>
                <div v-else>{{ formParam.clause20 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 20" @click="editTrue(20)" />
                    <Edit v-else @click="editNote(20)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox v-model="clausesCheckedOne" @change="clausesCheckedTwo = !clausesCheckedOne">
              <template #default>
                <span>21</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="OTHER CLAUSES" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 21" type="textarea" rows="3" v-model="formParam.clause21"
                  style="width: 1000px" @blur="editNote(21)"></el-input>
                <div v-else>{{ formParam.clause21 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 21" @click="editTrue(21)" />
                    <Edit v-else @click="editNote(21)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <el-checkbox v-model="clausesCheckedTwo" @change="clausesCheckedOne = !clausesCheckedTwo">
              <template #default>
                <span>22</span>
              </template>
            </el-checkbox>
          </el-col>
          <el-col :span="23">
            <el-form-item label="OTHER CLAUSES" label-width="180px">
              <div class="note-content">
                <el-input v-if="editId == 22" type="textarea" rows="3" v-model="formParam.clause22"
                  style="width: 1000px" @blur="editNote(22)"></el-input>
                <div v-else>{{ formParam.clause22 }}</div>
                <span>
                  <el-icon>
                    <Finished v-if="editId == 22" @click="editTrue(22)" />
                    <Edit v-else @click="editNote(22)" />
                  </el-icon>
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer">
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import moment from "moment";
import { ref, onMounted, reactive, computed, watch, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import service from "@/utils/request";
import { useTableDrag } from '@/hooks/useHooks';
import { downloadFile } from "@/utils/downloadFile";
import PreViewImageUpload from "@/components/ImageUpload/PreViewImageUpload.vue";
const { proxy } = getCurrentInstance();
const { tableRef } = useTableDrag()
const route = useRoute();
const router = useRouter();
import { ElNotification, ElMessageBox,ElMessage } from "element-plus";

const templateTypes = ["Standard", "AICC"];
const custForm = ref(null);
const dialogTitle = ref("");
const shippingTermsList = ref(["FLT", "FIO", "FILO", "LIFO"]);

const uploadUrl = "shipping/fixtureNote/upload";
const isTable = false;
const accept = ".xlsx,.xls";
const initForm = {
  fixtureNo: null,
  clientName: null,
  carrierCode: null,
  carrierName: null,
  vesselName: null,
  voyageNo: null,
  clientCode: null,
  contactName: null,
  pol: null,
  pod: null,
  paymentDay: null,
  ladingDay: null,
  email: null,
  laycanStart: null,
  laycanEnd: null,
  laycan: null,
  terms: <any>[],
  units: null,
  cargoType: null,
  totalCbm: null,
  readinessDate: null,
  shippingTerms: null,
  otherClauses: "",
  fixtureDate: moment(new Date()).format("YYYY-MM-DD"),
  signed: null,
  freightRate: null,
  detentionDay: null,
  deadFreightDay: null,
  fixtureId: null,
  readiness: null,
  readinessCN: null,
  cargoList: null
};

const freightRateBlur = () => {
  if (formParam.freightRate) {
    formParam.freightRate = Number(formParam.freightRate).toFixed(2);
  }
};
const clausesCheckedOne = ref(false);
const clausesCheckedTwo = ref(false);
const duesechecked = ref(false);

const terms = ref([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0]);

const formParam = reactive(Object.assign({}, initForm));
const total = ref(0);
const statuss = ["UnApprove", "Approve", "Reject"];

const rules = ref({
  readiness: [{ required: true, message: "readiness is required", trigger: "blur" }]
});

let showForm = route.query?.showForm;

let clients = reactive([]);
let vessels = reactive([]);
let voyages = reactive([]);
let carriers = reactive([] as any);
let pols = reactive([]);
let pods = reactive([]);
const isLoading = ref(false);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  vesselName: null,
  voyageNo: null,
  fullName: null,
  orderByColumn: undefined,
  isAsc: undefined,
  type: 0
});

const listData = ref([]);
const refreshTable = async () => {
  let result = await service.get("/shipping/fixtureNote/getTable", { params: queryParams });
  listData.value = result.data;
  total.value = result.total;
};
const resetQuery = (data: any) => {
  Object.assign(queryParams, data)
  listData.value = []
  total.value = 0
}
const dialogFormVisible = ref(false);

let isAdd = false;

const editClickEvent = row => {
  if (row.templateType == 0) {
    localStorage.setItem("RECORD_DATA", JSON.stringify(row));
    router.push({ path: "/contract/fixtureNote", query: { showForm: true,fixtureNo: row.fixtureNo } });
    showForm = true;
  } else {
    localStorage.setItem("RECORD_DATA1", JSON.stringify(row));
    router.push({ path: "/contract/aiccFixtureNote", query: { fixtureNo: row.fixtureNo } });
    showForm = true;
  }
};

const previewClickEvent = row => {
  if (row.templateType == 0) {
    localStorage.setItem("RECORD_DATA", JSON.stringify(row));
    router.push({ path: "/contract/fixtureNotePreview", query: { showForm: true,fixtureNo: row.fixtureNo } });
    showForm = true;
  } else {
    localStorage.setItem("RECORD_DATA1", JSON.stringify(row));
    router.push({ path: "/contract/aiccFixtureNotePreview" ,query: { fixtureNo: row.fixtureNo } });
    showForm = true;
  }
};

const recordData = ref();
// 编辑页面
const editId = ref(null);
const fixtureNoteClauseList = ref([]);
const getFixtureNoteClause = () => {
  service.get("/shipping/fixtureNoteClause", { type: 1 }).then(res => { 
    if (res.data) {
      res.data.forEach(item => {
        formParam["clause" + item.clauseId] = item.content;
      });
      fixtureNoteClauseList.value = res.data;
    }
  });
};

const editNote = id => {
  editId.value = id;
};
const editTrue = clauseId => {
  ElMessageBox.confirm(
    "Confirm to Save？",
    "Confirmation Information",
    {
      type: "warning",
      confirmButtonText: 'Save',
      cancelButtonText: 'Cancel'
    }
  ).then(async () => {
    editId.value = null;
    const content = formParam["clause" + clauseId]
    const id = fixtureNoteClauseList.value.find(item => item.clauseId == clauseId).id
    service.put("/shipping/fixtureNoteClause", { content, type: 1, clauseId, id }).then(res => {
      if (res) {
        ElNotification.success({
          title: "Prompt information",
          message: "Edit the data success!",
          position: "bottom-right",
        });
      }

    })
  });

};
const isFreight = ref(false);
watch(
  () => showForm,
  () => {
    if (showForm) {
      isFreight.value = route.query.isFreight
      recordData.value = JSON.parse(localStorage.getItem("RECORD_DATA"));
      Object.keys(recordData.value).forEach(key => {
        formParam[key] = recordData.value[key];
      });
      if (!formParam.fixtureDate) {
        formParam.fixtureDate = moment(new Date()).format("YYYY-MM-DD");
      }
      if (formParam.terms) {
        duesechecked.value = Boolean(formParam.terms[12]);
        clausesCheckedOne.value = Boolean(formParam.terms[20]);
        clausesCheckedTwo.value = Boolean(formParam.terms[21]);
      }
      if (formParam.laycanStart) {
        formParam.laycan = [formParam.laycanStart, formParam.laycanEnd];
      }
      getFixtureNoteClause();
      formParam.readiness = "ABOUT  UNIT OF , AROUND CARGO TO BE READY BY \n ";
      formParam.readiness += "货物量约为 货物需在" + " " + "（具体日期或时间点）前准备就绪";
      let params = { vesselName: formParam.vesselName, voyageNo: formParam.voyageNo, clientCode: formParam.clientCode }
      service.post("/shipping/fixtureNote/getAllFinishedByClient", params).then(res => {
        if (res) {
          formParam.pol = res.data.pol
          formParam.pod = res.data.pod
          if (res.data.readiness) {
            let readiness = res.data.readiness
            for (let i in readiness) {
              formParam.readiness += "ABOUT " + readiness[i].totalUnits + " UNITS OF " + readiness[i].brand + " , AROUND" + readiness[i].totalCbm + " CBM,CARGO TO BE READY BY\n ";
              formParam.readinessCN += "货物量约为" + readiness[i].totalUnits + "辆" + readiness[i].brand + ",货物需在" + " " + "（具体日期或时间点）前准备就绪\n ";

            }
            formParam.readiness += formParam.readinessCN
          }
          else {
            formParam.readiness = "ABOUT  UNIT OF , AROUND CARGO TO BE READY BY \n ";
            formParam.readiness += "货物量约为 货物需在" + " " + "（具体日期或时间点）前准备就绪";
          }
        }
      }).catch(err => {
        console.log(err);
      })

    }
  },
  { immediate: true }
);

const applicationNo = () => {
  router.push({ path: "/contract/fixtureNote/applyFixtureNo" });
};
const resetForm = () => {
  // @ts-ignore
  custForm.value.resetFields();
};

const submitForm = () => {
  // @ts-ignore
  custForm.value.validate(async valid => {
    if (!valid) {
      return;
    }
    if (!clausesCheckedOne.value && !clausesCheckedTwo.value) {
      ElMessage({
        message: "Please select at OTHER CLAUSES",
        type: "warning"
      });
      return;
    }
    terms.value[12] = Number(duesechecked.value);
    terms.value[20] = Number(clausesCheckedOne.value);
    terms.value[21] = Number(clausesCheckedTwo.value);
    formParam.terms = terms.value;
    formParam.otherClauses = clausesCheckedOne.value ? formParam.clause21 : formParam.clause22;
    // if (terms.value[19] == 1) {
    //   formParam.otherClauses =
    //     "OTHER TERMS AND CONDITIONS AS PER CARRIER'S STANDARD BILL OF LADING AND THE SIGNED " + formParam.signed;
    // }
 
    await service[isAdd ? "post" : "put"]("shipping/fixtureNote", formParam);

    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "save successful!",
      position: "bottom-right"
    });
    dialogFormVisible.value = false;
    cancelForm();
    refreshTable();
  });
};
const cancelForm = () => {
  router.push({ path: "/contract/fixtureNote" });
  showForm = false;
};
const pageQuery = async e => {
  queryParams.pageNum = e.page;
  queryParams.pageSize = e.limit;
  refreshTable();
};

const search = () => {
  refreshTable();
};

const selectVessel = value => {
  queryParams.voyageNo = null;
  voyages = (vessels.find(item => item.vesselName == value) || { schedules: [] }).schedules;
};

const handleSortChange = async (column: any) => {
  queryParams.orderByColumn = column.prop;
  queryParams.isAsc = column.order; //动态取值排序顺序
  refreshTable();
};

const removeClickEvent = id => {
  ElMessageBox.confirm("Confirm to delete the data？", "Confirmation Information", {
    type: "warning",
    confirmButtonText: "Confirm",
    cancelButtonText: "Cancel"
  }).then(async () => {
    await service.delete(`shipping/fixtureNote/${id}`);

    refreshTable();
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "Delete successfully!",
      position: "bottom-right"
    });
  });
};

const selectPortCode = (value: any) => {
  formParam.pod = null;
  formParam.pol = null;
  pods = (voyages.find(item => item.voyageNo == value) || { pods: [] }).pods;
  pols = (voyages.find(item => item.voyageNo == value) || { pols: [] }).pols;
};

const datePickChange = (value: any) => {
  formParam.laycanStart = moment(value[0]).format("YYYY-MM-DD");
  formParam.laycanEnd = moment(value[1]).format("YYYY-MM-DD");
};
const exportClickEvent = async row => {
  downloadFile("/shipping/fixtureNote/export", row, `${moment(new Date()).format("YYYYMMDD")}_.fixtureNote.docx`);
};

const exportFixtureNo = async () => {
  downloadFile("/shipping/fixtureNote/exportNo", queryParams, "fixtureNote.xlsx");
};

const handleStatus = (row: any) => {
  if (row.status != null && row.status != 0) {
    ElMessageBox.confirm("Confirm to update the Status？", "Confirmation Information", {
      type: "warning",
      confirmButtonText: "Confirm",
      cancelButtonText: "Cancel"
    }).then(async () => {
      await service.put(`shipping/fixtureNote/updateStatus`, row);
      ElNotification.success({
        title: "Prompt information",
        message: "Update Fixture Note status success!",
        position: "bottom-right"
      });
    });
  }
};
// 上传成功更新数据
const submitUploadForm = async data => {
  formParam.cargoList = data.url;
};

let cargo_type = reactive([]);
onMounted(async () => {
  let result = await service.get("/shipping/client/list");
  if (result) {
    clients = result.data;
  }
  result = await service.get("/shipping/carrier/list");
  if (result) {
    carriers = result.data;
  }
  result = await service.get("/shipping/schedule/getAllSchedule");
  if (result) {
    vessels = result.data;
  }

  const res = await proxy.useDict("cargo_type");
  cargo_type = res.cargo_type;
  //refreshTable();
});
</script>
<style scoped lang="scss">
.add-container {
  padding-top: 30px;
  background-color: #fafafa;
  min-height: 100%;
}

.form-container {
  margin: auto;
  padding: 40px;
  width: 90%;
  background-color: #fff;
}

.dialog-footer {
  margin: 60px auto 0;
  width: 100%;
  text-align: center;
}

.el-col>span {
  margin-left: 22px;
  line-height: 32px;
  font-size: 14px;
}

.flex-content .el-form-item__content {
  display: inline-block;
}

.el-checkbox {
  color: black;
}

.el-checkbox__label {
  margin-top: 2px;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}

::v-deep(.el-form-item__label) {
  font-weight: 400 !important;
}

.header-title {
  width: 100%;
}

.note-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>